@import './_palette.less';
@import './preset.less';
@import './vars.less';

/* stylelint-disable custom-property-empty-line-before */
body,
body[theme-mode='dark'] .nom-always-light {
  --nom-color-white: rgba(var(--nom-white), 1); // 浅色模式下深色背景内容Inverse
  --nom-color-black: rgba(var(--nom-black), 1); // 深色模式下浅色背景内容Inverse

  // 在所有组件中都使用css变量来设置颜色
  // 切换主题时，js重置primary相关的变量即可
  --nom-color-primary-base: var(
    --nom-indigo-5
  ); // Primary色的原始rgb色值，适用于某些情况需要自行设置主题色透明度
  --nom-color-primary-darken: rgba(var(--nom-indigo-6), 1); // 只要颜色加深状态
  --nom-color-primary: rgba(var(--nom-indigo-5), 1); // 主要颜色。仅在需要非常强调的情况下使用。
  --nom-color-primary-hover: rgba(var(--nom-indigo-6), 1); // 主要颜色悬浮态
  --nom-color-primary-active: rgba(var(--nom-indigo-7), 1); // 主要颜色激活态
  --nom-color-primary-disabled: rgba(var(--nom-indigo-2), 1); // 主要颜色禁用态
  --nom-color-primary-light-default: rgba(
    var(--nom-indigo-0),
    1
  ); // 浅版主要颜色（多用于背景）。仅在需要非常强调的情况下使用。
  --nom-color-primary-light-hover: rgba(var(--nom-indigo-1), 1); // 浅版主要颜色悬浮态
  --nom-color-primary-light-active: rgba(var(--nom-indigo-2), 1); // 浅版主要颜色激活态

  --nom-color-success: rgba(var(--nom-green-5), 1); // 成功色，表示安全、成功、开启的状态
  --nom-color-success-hover: rgba(var(--nom-green-6), 1); // 成功色悬浮态
  --nom-color-success-active: rgba(var(--nom-green-7), 1); // 成功色激活态
  --nom-color-success-disabled: rgba(var(--nom-green-2), 1); // 成功色禁用态
  --nom-color-success-light-default: rgba(
    var(--nom-green-0),
    1
  ); // 浅版成功色（多用于背景），表示安全、成功、开启的状态
  --nom-color-success-light-hover: rgba(var(--nom-green-1), 1); // 浅版成功色悬浮态
  --nom-color-success-light-active: rgba(var(--nom-green-2), 1); // 浅版成功色激活态

  --nom-color-info: rgba(var(--nom-blue-5), 1); // 信息色, 通常用于表达客观、中立信息
  --nom-color-info-hover: rgba(var(--nom-blue-6), 1); // 信息色悬浮态
  --nom-color-info-active: rgba(var(--nom-blue-7), 1); // 信息色激活态
  --nom-color-info-disabled: rgba(var(--nom-blue-2), 1); // 信息色禁用态
  --nom-color-info-light-default: rgba(
    var(--nom-blue-0),
    1
  ); // 浅版信息色（多用于背景），通常用于表达客观、中立信息
  --nom-color-info-light-hover: rgba(var(--nom-blue-1), 1); // 浅版信息色悬浮态
  --nom-color-info-light-active: rgba(var(--nom-blue-2), 1); // 浅版信息色激活态

  --nom-color-warning: rgba(var(--nom-orange-5), 1); // 警示色，表示警告、不安全的状态
  --nom-color-warning-hover: rgba(var(--nom-orange-6), 1); // 警示色悬浮态
  --nom-color-warning-active: rgba(var(--nom-orange-7), 1); // 警示色激活态
  --nom-color-warning-light-default: rgba(
    var(--nom-orange-0),
    1
  ); // 浅版警示色（多用于背景），表示警告、不安全的状态
  --nom-color-warning-light-hover: rgba(var(--nom-orange-1), 1); // 浅版警示色悬浮态
  --nom-color-warning-light-active: rgba(var(--nom-orange-2), 1); // 浅版警示色激活态

  --nom-color-danger: rgba(var(--nom-red-5), 1); // 危险色，表示危险的操作、或需要特别注意的危险信息
  --nom-color-danger-hover: rgba(var(--nom-red-6), 1); // 危险色悬浮态
  --nom-color-danger-active: rgba(var(--nom-red-7), 1); // 危险色激活态
  --nom-color-danger-light-default: rgba(
    var(--nom-red-0),
    1
  ); // 浅版危险色（多用于背景），表示危险的操作、或需要特别注意的危险信息
  --nom-color-danger-light-hover: rgba(var(--nom-red-1), 1); // 浅版危险色悬浮态
  --nom-color-danger-light-active: rgba(var(--nom-red-2), 1); // 浅版危险色激活态

  --nom-color-disabled-text: rgba(var(--nom-grey-9), 0.35); // 禁用态 - 文字
  --nom-color-disabled-border: rgba(var(--nom-grey-1), 1); // 禁用态 - 描边
  --nom-color-disabled-bg: rgba(var(--nom-grey-1), 1); // 禁用态 - 背景
  --nom-color-disabled-fill: rgba(var(--nom-grey-8), 0.04); // 禁用态 - 填充

  --nom-color-text-0: rgba(var(--nom-grey-9), 1); // 文本/图标颜色 - 最主要
  --nom-color-text-1: rgba(var(--nom-grey-9), 0.8); // 文本/图标颜色 - 稍次要
  --nom-color-text-2: rgba(var(--nom-grey-9), 0.6); // 文本/图标颜色 - 次要
  --nom-color-text-3: rgba(var(--nom-grey-9), 0.35); // 文本/图标颜色 - 最次要

  --nom-color-shadow: rgba(var(--nom-black), 0.04); // 用于模拟描边的阴影颜色

  --nom-color-border: rgba(var(--nom-grey-9), 0.15); // 默认描边颜色
  --nom-color-menu-bg: rgba(var(--nom-white), 1); // 导航背景色
  --nom-color-hover: rgba(var(--nom-grey-6), 0.05); // 基础对象的hover色

  // 和 dark模式有区别的变量
  --nom-color-fill-0: rgba(var(--nom-grey-6), 0.05); // 填充色 - 默认态
  --nom-color-fill-1: rgba(var(--nom-grey-8), 0.09); // 填充色 - 悬浮态
  --nom-color-fill-2: rgba(var(--nom-grey-8), 0.13); // 填充色 - 激活态
  --nom-color-bg-0: rgba(var(--nom-white), 1); // 背景色 - 最下层（底部页面）
  --nom-color-bg-1: rgba(var(--nom-white), 1); // 背景色 - 次下层（页面中需要提升的内容）
  --nom-color-bg-2: rgba(var(--nom-white), 1); // 背景色 - 中间层（模态等容器）
  --nom-color-bg-3: rgba(var(--nom-white), 1); // 背景色 - 次上层（通知，Toast等）
  --nom-color-bg-4: rgba(var(--nom-white), 1); // 背景色 - 最上层（特殊）
}

// dark模式下有区别的变量
body[theme-mode='dark'],
body .nom-always-dark {
  --nom-color-fill-0: rgba(var(--nom-white), 0.12);
  --nom-color-fill-1: rgba(var(--nom-white), 0.16);
  --nom-color-fill-2: rgba(var(--nom-white), 0.2);
  --nom-color-border: rgba(var(--nom-white), 0.08);
  --nom-color-menu-bg: rgba(35, 36, 41, 1);

  --nom-color-bg-0: rgba(22, 22, 26, 1);
  --nom-color-bg-1: rgba(35, 36, 41, 1);
  --nom-color-bg-2: rgba(53, 54, 60, 1);
  --nom-color-bg-3: rgba(67, 68, 74, 1);
  --nom-color-bg-4: rgba(79, 81, 89, 1);
}
